<!--suppress ALL -->
<template>
  <div class="site-action">
    <el-scrollbar>
      <el-timeline
        v-infinite-scroll="load"
        :infinite-scroll-disabled="false"
        infinite-scroll-delay="500"
      >
        <transition-group
          tag="div"
          name="fade-transform"
          leave-active-class="fade-transform-leave-active position-absolute"
        >
          <el-timeline-item
            v-for="action in filterActionList"
            :key="action.id"
            :timestamp="$dayjs(action.created).toNow()"
            placement="top"
            :color="action.verb | getVerbInfo('color')"
            :icon="action.verb | getVerbInfo('icon')"
          >
            <el-card>
              <p style="color: #7f8c8d">#{{ action.id }}</p>

              <el-tag> {{ action.verb | getVerbInfo("text") }}</el-tag>
              {{ action.info }}
              <p>
                {{ action.user.username }} (
                {{ action.user.nickname || "还没有昵称呢" }} )于
                {{ $dayjs(action.created).format("YYYY-MM-mm HH:mm:ss") }}
              </p>
            </el-card>
          </el-timeline-item>
        </transition-group>
      </el-timeline>
    </el-scrollbar>

    <site-action-filter v-bind.sync="filter" />
    <!--    sync:使用它 子组件必须使用$emit('update:keywords',$event) 的方式 -->
  </div>
</template>

<script>
import SiteActionFilter from "./SiteActionFilter";

export const actionMap = {
  get: {
    text: "访问",
    type: "success",
    icon: "el-icon-view",
    color: "#67c23A",
  },
  login: {
    text: "登录",
    type: "success",
    icon: "el-icon-d-arrow-right",
    color: "#67c23A",
  },
  logout: {
    text: "登出",
    type: "info",
    icon: "el-icon-d-arrow-left",
    color: "#D3D4D6",
  },
  create: {
    text: "创建",
    type: "success",
    icon: "el-icon-plus",
    color: "#67C23A",
  },
  delete: {
    text: "删除",
    type: "danger",
    icon: "el-icon-delete",
    color: "#F56C6C",
  },
  update: {
    text: "更新",
    type: "warning",
    icon: "el-icon-edit",
    color: "#E6A23C",
  },
};
export default {
  name: "SiteAction",
  data() {
    return {
      page: 1, // 当前是第几页
      size: 20, // 请求的数量
      count: 0, //
      disableLoad: false,
      actionList: [],
      timer: null,
      pollingRun: false,
      // 做 右边的筛选操作
      filter: {
        keywords: "",
        timeRange: [],
        actionSelect: [],
        checkAll: true,
      },
    };
  },
  computed: {
    // 用户操作筛选
    filterActionList() {
      let arr = [...this.actionList];
      // username || nickname 筛选
      if (this.filter.keywords) {
        const keywords = this.filter.keywords.toLowerCase();
        arr = arr.filter(
          (item) =>
            item.user.username.toLowerCase().includes(keywords) ||
            item.user.nickname.toLowerCase().includes(keywords)
        );
      }

      // 时间筛选

      if (this.filter.timeRange && this.filter.timeRange.length > 0) {
        // console.log('1111',this.filter.timeRange)
        let [start, end] = this.filter.timeRange;
        end = end || new Date();

        console.log("end", end);
        arr = arr.filter((item) => {
          console.log("---", item.created);
          // console.log( '1',new Date(item.created) >= start )
          console.log("2", item.created <= end);
          return (
            new Date(item.created) >= start && new Date(item.created) <= end
          );
        });
      }

      // CheckBox 筛选
      if (this.filter.actionSelect) {
        arr = arr.filter((item) =>
          this.filter.actionSelect.includes(item.verb)
        );
      }
      console.log("arr", arr);
      return arr;
    },
  },
  watch: {
    ["filterActionList.length"](val) {
      if (val < 10) {
        this.load();
      }
    },
  },
  components: { SiteActionFilter },
  methods: {
    async getActions() {
      // 此方法在created 阶段调用
      const { count, results } = await this.$api.getActions({
        size: this.size,
      });
      this.count = count;
      this.actionList = results;
      // console.log(this.actionList);
    },
    // 滚动加载
    async load() {
      this.page++;
      this.size = this.page * 20;
      // console.log(this.page, this.size);
      await this.getActions();
      setTimeout(() => {
        this.disableLoad = false;
      }, 500);
    },
    // 轮询服务器方法
    polling() {
      // 轮询方法
      this.pollingRun = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        await this.getActions();
        this.polling(); // 递归
      }, 5000);
    },
    // 开始轮询
    startPolling() {
      if (this.pollingRun) return;
      this.polling();
    },
    //   关闭轮询
    closePolling() {
      this.pollingRun = false;
      clearTimeout(this.timer);
      this.timer = null;
    },
  },

  // 过滤器
  filters: {
    getVerbInfo(verb, key) {
      return actionMap[verb][key];
    },
  },
  created() {
    this.getActions(); //在 methods中写 getActions方法 在这里调用
    this.startPolling();
    this.filter.actionSelect = Object.keys(actionMap);

    // 根据 api中的方法 请求用户操作数据
    //   this.$api.getActions({ param: { page:this.page,size: this.size } })
    //     .then((data) => {
    //       this.actionList = data.results;
    //       console.log("11", this.actionList);
    //     })
    //     .catch((err) => Promise.reject(err));
  },
  beforeDestroy() {
    this.closePolling();
  },
  activated() {
    this.getActions();
    this.startPolling();
  },
  deactivated() {
    this.closePolling();
  },
};
</script>

<style lang="scss" scoped>
.run {
  transform: translateX(200px);
}

.site-action {
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  width: 100%;
  height: calc(100vh - 140px);
}

.el-timeline-item {
  margin-left: 60px;

  .el-card {
    width: 95%;
  }
}

.el-timeline-item {
  ::v-deep.el-timeline-item__node {
    width: 20px;
    height: 20px;
    top: 2px;
    left: -4px;
  }
}

.el-scrollbar {
  width: 100%;
  height: 105%;

  ::v-deep.el-scrollbar__wrap {
    width: calc(100% + 30px) !important;
    padding-right: 30px;
  }
}
</style>
